﻿@{
    ViewData["Title"] = "商品列表";
}
<div class="shop-page-area ptb-100">
    <div class="container" style="width:100%;padding-left:0px;padding-right:0px;">
        <div class="row">
            <div class="col-md-3">
                <div class="blog-sidebar">
                    <div class="single-sidebar">
                        <h3 class="sidebar-title">价格范围</h3>
                        <div class="price-filter">
                            <div id="slider-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                                <div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 0%; width: 94.6429%;"></div>
                                <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;" draggable="true" ondrag="javascript:drag(event,this);"></span>
                                <span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 94.6429%;" draggable="true" ondrag="javascript:drag(event,this);"></span>
                            </div>
                            <div class="price-slider-amount">
                                <input type="text" id="amount" name="price">
                            </div>
                        </div>
                    </div>
                    <div class="single-sidebar">
                        <h3 class="sidebar-title">商品类型</h3>
                        <div class="sidebar-list">
                            <ul>
                                <li><input type="checkbox"> <a href="#">裙子 (7)</a></li>
                                <li><input type="checkbox"> <a href="#">配饰 (9)</a></li>
                                <li><input type="checkbox"> <a href="#">上衣 (3)</a></li>
                                <li><input type="checkbox"> <a href="#">手提包 (1)</a></li>
                                <li><input type="checkbox"> <a href="#">手表 (7)</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="single-sidebar">
                        <h3 class="sidebar-title">选择颜色</h3>
                        <div class="sidebar-list">
                            <ul>
                                <li><input type="checkbox"> <a href="#">红色 (8)</a></li>
                                <li><input type="checkbox"> <a href="#">绿色 (5)</a></li>
                                <li><input type="checkbox"> <a href="#">蓝色 (2)</a></li>
                                <li><input type="checkbox"> <a href="#">黑色 (6)</a></li>
                                <li><input type="checkbox"> <a href="#">粉色 (7)</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="single-sidebar">
                        <h3 class="sidebar-title">商城品牌</h3>
                        <div class="sidebar-list">
                            <ul>
                                <li><input type="checkbox"> <a href="#">耐克 (8)</a></li>
                                <li><input type="checkbox"> <a href="#">童泰 (2)</a></li>
                                <li><input type="checkbox"> <a href="#">海澜之家 (5)</a></li>
                                <li><input type="checkbox"> <a href="#">格力电器 (8)</a></li>
                                <li><input type="checkbox"> <a href="#">恒大商城 (5)</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="single-sidebar">
                        <h3 class="sidebar-title">流行标签</h3>
                        <div class="tag">
                            <ul>
                                <li><a href="#">服装</a></li>
                                <li><a href="#">配饰</a></li>
                                <li><a href="#">休闲</a></li>
                                <li><a href="#">鞋类</a></li>
                                <li><a href="#">母婴</a></li>
                                <li><a href="#">查看所有标签</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-9">
                <div class="blog-wrapper shop-page-mrg">
                    <div class="tab-menu-product">
                        <div class="tab-menu-sort">
                            <div class="tab-menu">
                                <ul role="tablist">
                                    <li class="active" id="gridTab">
                                        <a href="#grid" data-toggle="tab" onclick="javascript:showGrid();return false;">
                                            <i class="fa fa-th-large"></i>
                                            网格
                                        </a>
                                    </li>
                                    <li id="listTab">
                                        <a href="#list" data-toggle="tab" onclick="javascript:showList();return false;">
                                            <i class="fa fa-align-justify"></i>
                                            列表
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div class="tab-sort">
                                <label>排序 : </label>
                                <select>
                                    <option value="">位置</option>
                                    <option value="">流行度</option>
                                    <option value="">价格</option>
                                    <option value="">评分</option>
                                </select>
                            </div>
                        </div>
                        <div class="tab-product">
                            <div class="tab-content">
                                <div class="tab-pane active" id="grid">
                                    <div class="row">
                                        @{
                                            var products = ViewData["ProductList"] as List<Product>;
                                            if(products!=null && products.Count > 0)
                                            {
                                                foreach (var product in products)
                                                {
                                                    <div class="col-md-6 col-lg-4 col-sm-6">
                                                        <div class="single-shop mb-40">
                                                            <div class="shop-img">
                                                                <a href="#"><img src="@product.ImageUrl" alt=""></a>
                                                                <div class="shop-quick-view">
                                                                    <a href="/Product/Detail/@product.Id" data-toggle="modal" data-target="#quick-view" title="预览">
                                                                        <i class="pe-7s-look"></i>
                                                                    </a>
                                                                </div>
                                                                <div class="button-group">
                                                                    <a href="#" title="添加购物车" onclick="javascript:addCart(@(product.Id));return false;">
                                                                        <i class="pe-7s-cart"></i>
                                                                        添加购物车
                                                                    </a>
                                                                    <a class="wishlist" href="#" title="立即购买" onclick="javascript:buy(@(product.Id));return false;">
                                                                        <i class="pe-7s-like"></i>
                                                                        立即购买
                                                                    </a>
                                                                </div>
                                                            </div>
                                                            <div class="shop-text-all">
                                                                <div class="title-color fix">
                                                                    <div class="shop-title f-left">
                                                                        <h3><a href="/Product/Detail/@product.Id">@product.Name</a></h3>
                                                                    </div>
                                                                    <span class="price f-right">
                                                                        <span class="new">$@product.PreferentialPrice</span>
                                                                    </span>
                                                                </div>
                                                                <div class="fix">
                                                                    <span class="f-left">@(product.BasicStyle) | @(product.ProductStyle)</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                }
                                            }
                                            else
                                            {
                                                <div>没有符合条件的商品</div>
                                            }
                                        }
                                    </div>
                                </div>
                                <div class="tab-pane mb-10" id="list">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="row">
                                                @{
                                                    if (products != null && products.Count > 0)
                                                    {
                                                        foreach (var product in products)
                                                        {
                                                            <div class="single-shop mb-40">
                                                                <div class="col-md-4 col-sm-4 col-xs-12">
                                                                    <div class="shop-list-left">
                                                                        <div class="shop-img">
                                                                            <a href="#"><img src="@product.ImageUrl" alt=""></a>
                                                                            <div class="shop-quick-view">
                                                                                <a href="#" data-toggle="modal" data-target="#quick-view" title="预览">
                                                                                    <i class="pe-7s-look"></i>
                                                                                </a>
                                                                            </div>
                                                                            <div class="price-up-down">
                                                                                <span class="sale-new"> @(Math.Round(product.Preferential * 100, 0))% </span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-8 col-sm-8 col-xs-12">
                                                                    <div class="shop-list-right">
                                                                        <div class="shop-list-all">
                                                                            <div class="shop-list-name">
                                                                                <h3><a href="/Product/Detail/@product.Id">@product.Name</a></h3>
                                                                            </div>
                                                                            <div class="shop-list-rating">
                                                                                <span class="ratting">
                                                                                    <i class="fa fa-star active"></i>
                                                                                    <i class="fa fa-star active"></i>
                                                                                    <i class="fa fa-star active"></i>
                                                                                    <i class="fa fa-star active"></i>
                                                                                    <i class="fa fa-star active"></i>
                                                                                </span>
                                                                            </div>
                                                                            <div class="shop-list-price">
                                                                                <span class="list-price">
                                                                                    <span class="new">$@product.PreferentialPrice</span>
                                                                                    <span class="old">$@product.Price</span>
                                                                                </span>
                                                                            </div>
                                                                            <div class="shop-list-cart">
                                                                                <div class="shop-group">
                                                                                    <a href="#" title="加入购物车" onclick="javascript:addCart(@(product.Id));return false;">
                                                                                        <i class="pe-7s-cart"></i>
                                                                                        加入购物车
                                                                                    </a>
                                                                                    <a class="wishlist" href="#" title="立即购买" onclick="javascript:buy(@(product.Id));return false;">
                                                                                        <i class="pe-7s-like"></i>
                                                                                        立即购买
                                                                                    </a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        }
                                                    }
                                                    else
                                                    {
                                                        <div>没有符合条件的商品</div>
                                                    }
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="page-pagination text-center" style="margin-top:10px;">
                                    <ul>
                                        @{
                                            var totalNum =Math.Ceiling(products.Count / 40.0f);
                                            var currentNum = 1;
                                            for(int i = 1; i <= totalNum; i++)
                                            {
                                                <li><a class="@(i == currentNum?"active":string.Empty)" href="#">@i</a></li>
                                            }
                                        }
                                        <li><a href="#"><i class="fa fa-angle-double-right">»</i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="~/js/plugins.js"></script>
<script src="~/js/shop.js"></script>